<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>增删改查</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }

        #d1 {
            background: red;
        }

        #d2 {
            background: blue;
        }

        #d3 {
            background: purple;
        }

        #d4 {
            background: pink;
        }
    </style>
</head>
<body>

<button onclick="addNode()">增加</button>
<button onclick="removeNode()">删除</button>
<button onclick="replaceNode()">替换</button>
<button onclick="copyNode()">克隆</button>
<hr>

<div id="d1">
    d1
</div>
<div id="d2">
    d2
</div>
<div id="d3">
    d3
    <p>
        这是一个段落
    </p>
</div>
<div id="d4">
    d4
</div>
</body>
<script>
    //克隆元素 比如克隆d3插入到d2前面
    function copyNode(){
        //获取d3
        var objDiv = document.getElementById("d3")

        //克隆d3
        var newDiv = objDiv.cloneNode(true)

        //获取d3的父元素
        var parentObj = objDiv.parentNode

        //获取d2元素
        var objD2 = document.getElementById("d2")
        //通过父元素将子元素插入到d2元素之前
        parentObj.insertBefore(newDiv,objD2)
    }

    //替换元素
    function replaceNode() {
        //1.创建一个新的元素用于替换旧的元素
        var objH1 = document.createElement("h1")
        objH1.innerHTML = "我是一个标题"
        //2. 获取要被替换掉的元素
        var objOld = document.getElementById("d1")
        // 3. 获取要替换元素的父元素
        var objParent = objOld.parentNode

        //4. 通过父元素将子元素替换
        objParent.replaceChild(objH1, objOld)
    }


    //删除元素
    function removeNode() {
        //获取body元素
        var objBody = document.body

        //获取要删除的元素
        objDiv = document.getElementsByTagName("div")

        //从body中删除div
        objBody.removeChild(objDiv[objDiv.length - 1])
    }


    //创建元素/添加元素
    function addNode() {
        //获取body元素
        var objBody = document.getElementsByTagName("body")[0]

        //创建一个div元素
        var objDiv = document.createElement("div")
        //指定div的宽高，边框和背景颜色
        objDiv.style.width = "100px";
        objDiv.style.height = "100px"
        objDiv.style.border = "1px solid #000"
        //指定背景颜色随机
        var r = Math.floor(Math.random() * 255)
        var g = Math.floor(Math.random() * 255)
        var b = Math.floor(Math.random() * 255)
        objDiv.style.background = "rgb(" + r + "," + g + "," + b + ")"

        //指定Div中的内容
        objDiv.innerHTML = "李伟聪，很帅"

        //将div 元素添加到body中
        objBody.appendChild(objDiv)
    }
</script>
</html>